<template>
  <div class="box">
    <div class="list">
      <el-table :data="data" border size="small" style="width: 100%">
        <el-table-column fixed prop="id" label="管理员id"> </el-table-column>
        <el-table-column prop="name" label="name"> </el-table-column>
        <el-table-column prop="name" label="phone"> </el-table-column>

        <el-table-column prop="privileges" label="已有权限列表">
          <template slot-scope="scope">
            <div v-for="item in scope.row.privileges" :key="item.id">
              <span>{{ item.name }}</span>
              <span
                style="cursor: pointer; margin-left: 1vw"
                @click="del(scope.row.id, item.id)"
                ><i class="el-icon-remove-outline" style="color: red"></i
              ></span>
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="addClick(scope.row.id)" type="text" size="small"
              >添加权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        append-to-body
        class="dialog"
        title="添加权限"
        :visible.sync="dialoger"
      >
        <div>
          <el-select v-model="body.pid" placeholder="请选择">
            <el-option
              v-for="item in elsePrivileges"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <div>
          <p style="margin-left: 1vw; margin-top: 1vh">备注</p>
          <el-input style="width: 87%" v-model="body.note"></el-input>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (dialoger = false),
                (body.pid = ''),
                (body.note = ''),
                (body.aid = '')
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="add()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      data: [],
      dialoger: false,
      elsePrivileges: [],
      body: {
        aid: "",
        pid: "",
        note: "",
      },
    };
  },
  methods: {
    // 获取数据
    async getData() {
      const { data: res } = await this.$http.get("/aps");
      if (res.code == 200) {
        this.data = res.data;
      }
    },
    // 点击添加权限按钮
    async addClick(id) {
      this.dialoger = true;
      const { data: res } = await this.$http.get("/aps/noin/" + id);
      this.elsePrivileges = res.data;
      this.body.aid = id;
    },

    // 添加权限
    async add() {
      const { data: res } = await this.$http.post("/aps", this.body);
      if (res.code == 200) {
        this.dialoger = false;
        this.$msg.fail("添加成功");

        this.body = {
          aid: "",
          pid: "",
          note: "",
        };
      }
    },
    // 删除
    async del(aid, pid) {
      var obj = {
        aid: aid,
        pid: pid,
      };
      console.log(obj);
      const { data: res } = await this.$http.post("/aps/del", obj);
      if (res.code == 200) {
        this.$msg.fail("删除成功");
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>
  
  <style>
.box {
  width: 100%;
}
.list {
  height: 85vh; ;
}
</style>